Skip to content

Conversation

@paulrosen
Copy link

I think there are so many differences between the header type lines and the music lines that the syntax highlighting should be completely different between the two.

I am just learning about highlight.js so I'm sure this code isn't the most efficient, but it does a pretty good job on some test strings I fed it.

In addition, I have a catch-all rule. If a character isn't handled by a rule it gets hljs-error class.

Also, there weren't any instructions on how to build the dist folders, but they don't seem to be used by the node imports so that doesn't seem to matter.

@paulrosen
Copy link
Author

BTW, you can see an example of the output here: https://abcjs-editor-syntax-highlighting.netlify.app/ with my first attempts at a theme.

For convenience I'm dumping the output of the highlighter to the page so you can see how it is being handled.

Copy link
Member

@NriotHrreion NriotHrreion left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The scope property is pre-defined in highlight.js source code. The scopes you just wrote wouldn't be recognized by highlight.js and thus wouldn't be colored on the web page unless you define them manually in css.

The scopes document is here: https://highlightjs.readthedocs.io/en/latest/css-classes-reference.html

I was busy working on my personal project, and sorry for not seeing your PR in time.

@paulrosen
Copy link
Author

I'm also just working on this when I get a free moment, so no worries.

I was wondering if we should also have a couple example themes delivered in this package, too, for that reason. I'm experimenting with the look right now and trying to figure out what is useful.

@paulrosen
Copy link
Author

This is what I have so far, but I plan to tweak this a lot before I'm ready to release:

/* Header lines */
.hljs-header {
	color: #0B34A8;
}
.hljs-header-content {
	font-weight: bold;
}
.hljs-title {
	font-weight: bold;
}
.hljs-staves {
	background-color: #ffdfe5;
}
.hljs-staves-content {
	font-weight: bold;
}
.hljs-key {
	font-weight: bold;
}

/* Music lines */
.hljs-inline-header {
	background-color: #ffdfe5;
}
.hljs-note {
	border-bottom: 1px solid blue;
	border-radius: 6px;
}
.hljs-chord-symbol {
	color: #107121;
}
.hljs-decoration {
	color: #0f7d8c;
}
.hljs-grace {
	background: #F2F2F2;
}
.hljs-chord {
	background: #FCF2D0;
}
.hljs-bar {
	background: #71f6ff;
}
.hljs-overlay {
	background: #71f6ff;
}
.hljs-error {
	color: #ffffff;
	background: red;
}
.hljs-comment {
	font-style: italic;
	color: #818181;
}
.hljs-slur {
	border-bottom: 2px dotted #aaa;
}

@NriotHrreion
Copy link
Member

NriotHrreion commented Jul 29, 2025

But the scopes you defined might not be included in other official themes because they are actually not officially provided scopes.
I suggest you use the pre-defined scopes in the highlight.js docs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants